* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.section:nth-child(1){
  overflow: hidden;
  h1{
    transform: translateX(-100%) skew(170deg);
  }
  h2{
    transform: translateX(100%);
  }
  h3{
    text-align: center;
    transform: translateY(1000px);
  }
  &.active1{
    h1{
      transform:translate(20%) skew(0deg);
      transition: all 3s;

    }
    h2{
      // transform:translate(60%);
      // transition: all 2s 3s;
      animation:h2 2s 3s forwards ;

    }
    h3{
      transform:translateY(200px) rotate(720deg);
      transition: all 2s 3s;

    }
  }
}

@keyframes h2 {
  25%{
    transform:translate(10%) rotate(360deg);
  }
  50%{transform:translate(80%) rotate(-30deg)}
  75%{transform:translate(20%) rotate(30deg)}
  100%{transform:translate(60%) rotate(0)}
  
}

.box{
  position: fixed;

  top: 0;
  right:0;
  width: 84px;
  height: 84px;
  z-index:9999;
  .music{
    img{
      position: absolute;
      top: 0;
    }
    .playActive{
      animation: play 3s linear infinite
    }
  }

  
}
@keyframes play {
  100%{
    transform:rotate(360deg)
  }
}